<template>
	<view class="page">
		<view class="card">
			<view class="card-title">问题原因<text class="card-must">*</text></view>
			<view class="card-body">
				<view class="card-type">
					<view
						v-for="(v, k) in typeData"
						:key="k" 
						:class="'card-type-item ' +(k === typeSelected ? 'card-type-item-active' : '')"
						@click="typeSelected = k"
					>
						{{v}}
						<image src="@/static/dui.png" mode="aspectFill" 
						   v-if="k === typeSelected" 
						   class="card-type-icon">	
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-title">问题描述<text class="card-must">*</text></view>
			<view class="card-body">
				<textarea placeholder="请输入具体的问题描述"></textarea>
			</view>
		</view>
		<view class="card">
			<view class="card-title">上传照片</view>
			<view class="card-body">
				<view class="card-imgs">
					<view class="card-imgs-item" v-for="(v, k) in imgData" :key="k">
						<image :src="v.src" />
						<view class="card-imgs-item-mask" v-if="v.uploading">
							上传中
						</view>
						<view class="card-imgs-item-del">
							<image src="/static/style4/del.png"></image>
						</view>
					</view>
					<view class="card-imgs-upload" v-if="imgData.length < 6">
						<image src="/static/style4/upload.png" />
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-title">联系方式<text class="card-must">*</text></view>
			<view class="card-body">
				<input placeholder="请输入手机号码" />
			</view>
		</view>
		<view class="button">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeData: ['功能异常', '产品建议', '充值问题', '其他问题'],
				typeSelected: 0,
				imgData: [
				],
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.page {
		background-color: #F3F3F3;
		min-height: 100vh;
		.card {
			width: 750rpx;

			.card-title {
				font-size: 14px;
				padding: 15rpx 40rpx;

				.card-must {
					color: red;
				}
			}

			.card-body {
				padding: 15rpx;

				textarea {
					font-size: 14px;
					height: 300rpx;
					background: #F8F8F8;
					width: 720rpx;
					padding: 10rpx;
					box-sizing: border-box;
				}

				input {
					font-size: 14px;
					background: #F8F8F8;
					width: 720rpx;
					box-sizing: border-box;
					height: 70rpx;
					padding: 0 15rpx;
					border: 1px solid #F8F8F8;
				}

				.card-type {
					display: flex;
					flex-wrap: wrap;
					.card-type-item {
						box-sizing: border-box;
						position: relative;
						width: 150rpx;
						height: 50rpx;
						border-radius: 8rpx;
						line-height: 50rpx;
						text-align: center;
						font-size: 12px;
						background: #F8F8F8;
						margin: 10rpx;
						border: 1px solid #D8D8D8;

						&:active {
							background: #ddd;
						}
					}

					.card-type-item-active {
						border: 1px solid #3D3D3D;
					}
				}

				.card-imgs {
					display: flex;
					flex-wrap: wrap;

					.card-imgs-item {
						width: 150rpx;
						height: 150rpx;
						background: #444;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 12rpx;
						margin: 10rpx;
						position: relative;

						.card-imgs-item-mask {
							position: absolute;
							left: 0;
							top: 0;
							width: 150rpx;
							height: 150rpx;
							z-index: 1;
							background: rgba(0, 0, 0, .5);
							color: #fff;
							font-size: 14px;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						image {
							height: 150rpx;
							border-radius: 12rpx;
						}

						.card-imgs-item-del {
							width: 40rpx;
							height: 40rpx;
							position: absolute;
							right: -15rpx;
							top: -15rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							z-index: 2;
							background: #fff;
							border-radius: 50%;

							image {
								width: 40rpx;
								height: 40rpx;
							}
						}

					}

					.card-imgs-upload {
						width: 150rpx;
						height: 150rpx;
						box-sizing: border-box;
						border: 1px #777 dashed;
						border-radius: 12rpx;
						margin: 10rpx;
						background: #f8f8f8;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						&:active {
							background: #ccc;
						}

						image {
							width: 60rpx;
							height: 60rpx;
						}

						text {
							font-size: 12px;
							color: #777;
						}

					}
				}

			}
		}

		.button {
			width: 670rpx;
			margin: 20rpx auto;
			text-align: center;
			line-height: 88rpx;
			height: 88rpx;
			border-radius: 50rpx;
			background: #FF8732;
			color: #fff;
		}
	}
	.card-type-icon {
	  position: absolute;
	  right: -1rpx;
	  bottom: -1rpx;
	  width: 32rpx;
	  height: 22rpx;
	  background-size: 100%;
	}
</style>